<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="head">
                    <div class="headleft">
                        字典表
                    </div>
                    <div class="headright">
                        <!-- <el-button type="primary" @click="dialogVisible = true">新增</el-button> -->
                    </div>
                    <!-- 弹窗 -->
                    <el-dialog v-model="dialogVisible" title="增加字典表" width="30%" draggable>
                        <div>
                            名称：<el-input></el-input>
                            <el-button type="primary" round>保存</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-header>
            <el-main>
                <div class="contain">
                    <div class="contain-left">
                        <div class="box1">
                            <span>药品信息</span>
                        </div>
                        <div class="box2">

                            <span @click="kai">中药用法</span>

                        </div>
                        <!-- <div class="box2">

                            <span @click="kai">中药备注</span>

                        </div>
                        <div class="box2">

                            <span @click="kai">
                                药品分类
                            </span>

                        </div> -->
                        <div class="box1">
                            <span>检查项目</span>
                        </div>
                        <div class="box2">

                            <span @click="guan">
                                检查类型
                            </span>

                        </div>
                    </div>
                    <div class="contain-right">
                        <vue1 v-if="flag" />
                        <vue2 v-if="!flag" />
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import vue1 from '@/views/wqh/dic_item/1-2.vue'
import vue2 from '@/views/wqh/dic_item/1-4.vue'
const dialogVisible = ref(false)
const flag = ref(true)
const kai = () => {
    flag.value = true

}
const guan = () => {
    flag.value = false
}
</script>

<style scoped>
body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #676a6d;
    background-color: #f3f5f8;
    font-family: "sans-serif";
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "sans-serif";
    color: #676a6d;
    background-color: #f3f5f8;
    /* border-radius: 3px; */
    /* box-shadow: 0 2px 6px rgb(0 0 0 / 8%); */
    /* margin-left: -200px; */
    width: 1200px;
}

.contain {
    display: flex;
}

.contain-left {
    width: 177px;
    height: 260px;
    /* outline: solid 1px red; */
    margin-right: 20px;
    background-color: #e5e5e5;
}

.contain-right {
    width: 1040px;
    height: 208px;
    /* outline: solid 1px red; */
}



.box1 {
    width: 176px;
    height: 40px;
    font-size: 15px;
    color: #676a6d;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;

}

.box2:hover:hover {
    background-color: #00aaff;
    color: white;
}

.box2 {
    width: 176px;
    height: 40px;
    font-size: 15px;
    color: #676a6d;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>